<template>
  <div class="svg-setting-container">
    <SplitterGroup direction="horizontal">
      <SplitterPanel :min-size="0" :max-size="40" :default-size="20">
        <div
          class="left-container"
          :style="{
            borderRight: `1px solid ${themeStyle[theme].borderColor1}`
          }"
        >
          <div
            class="title-container"
            :style="{
              background: themeStyle[theme].backgroundColor3
            }"
          >
            <span>列表</span>
          </div>
          <div class="icon-list-content">
            <div class="icon-list-item" style="justify-content: center" @click="addSvg">
              <PlusOutlined />
            </div>
            <template v-for="(item, index) in svgList" :key="index">
              <div class="icon-list-item" @click="svgEdit = item">
                <div class="icon-content">
                  <span>{{ item.name }}</span>
                  <div class="icon" v-html="item.svg"></div>
                </div>
                <div class="remove-icon" @click="removeSvg(item.id)">
                  <CloseOutlined />
                </div>
              </div>
            </template>
          </div>
        </div>
      </SplitterPanel>
      <SplitterResizeHandle />
      <SplitterPanel>
        <div class="center-container">
          <div
            class="title-container"
            :style="{
              background: themeStyle[theme].backgroundColor3
            }"
          >
            <span>编辑</span>
          </div>
          <div
            class="name-container"
            :style="{
              borderBottom: `1px solid ${themeStyle[theme].borderColor1}`
            }"
          >
            <span>名称</span>
            <Input
              v-if="svgEdit"
              v-model:value="svgEdit.name"
              size="small"
              placeholder="请输入名称"
            />
          </div>

          <div
            class="code-title"
            :style="{
              background: themeStyle[theme].backgroundColor3
            }"
          >
            <span>svg代码</span>
          </div>
          <div class="code-container">
            <Textarea
              v-if="svgEdit"
              v-model:value="svgEdit.svg"
              placeholder="svg代码部分"
              :rows="10"
            ></Textarea>
          </div>

          <div class="submit-container">
            <Button type="primary" ghost size="small" @click="submitSvg">提交</Button>
          </div>
        </div>
      </SplitterPanel>
      <SplitterResizeHandle />
      <SplitterPanel :min-size="0" :max-size="40" :default-size="20">
        <div
          class="right-container"
          :style="{
            borderLeft: `1px solid ${themeStyle[theme].borderColor1}`
          }"
        >
          <div
            class="title-container"
            :style="{
              background: themeStyle[theme].backgroundColor3
            }"
          >
            <span>预览</span>
          </div>

          <div class="preview-container">
            <div v-if="svgEdit" class="preview-icon" v-html="svgEdit.svg"></div>
          </div>
        </div>
      </SplitterPanel>
    </SplitterGroup>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
import { onMounted, ref } from 'vue'
import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { Input, Textarea, Button } from 'ant-design-vue'
import { generateUUID } from '@renderer/utils/utils'

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)

type ISvg = {
  id: string
  name: string
  svg: string
}
const svgList = ref<ISvg[]>([])
onMounted(async () => {
  svgList.value = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataList', [])
})

const svgEdit = ref<ISvg>()
const addSvg = () => {
  svgEdit.value = {
    id: generateUUID(),
    name: 'svg1',
    svg: ''
  }
}

const submitSvg = async () => {
  if (!svgEdit.value?.id) return
  //先根据id判断主进程中是否有这svg
  const svgData = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataById', [
    svgEdit.value.id
  ])

  if (svgData) {
    //删除这个svg
    await window.electron.ipcRenderer.invoke('nodeIcon', 'removeSvgData', [svgData])
  }

  //添加svg
  const tempData = JSON.parse(JSON.stringify(svgEdit.value))
  await window.electron.ipcRenderer.invoke('nodeIcon', 'addSvgData', [tempData])

  //刷新svg列表
  svgList.value = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataList', [])
}

const removeSvg = async (id: string) => {
  const svgData = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataById', [id])
  if (svgData) {
    //删除这个svg
    await window.electron.ipcRenderer.invoke('nodeIcon', 'removeSvgData', [svgData])
  }

  //刷新svg列表
  svgList.value = await window.electron.ipcRenderer.invoke('nodeIcon', 'getSvgDataList', [])
}
</script>

<style scoped lang="scss">
.svg-setting-container {
  padding: 5px;
  height: calc(100% - 40px);
  font-size: $font-size-medium;

  .title-container {
    height: 25px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 10px;
  }

  .left-container {
    height: 100%;
    width: calc(100% - 2px);

    .icon-list-content {
      height: calc(100% - 25px);
      overflow: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      /* 设置滚动条样式 */
      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ccccccaa;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #aaaaaaaa;
      }

      .icon-list-item {
        margin-top: 5px;
        height: 30px;
        width: calc(100% - 40px);
        background-color: #f1f1f1aa;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 5px;
        position: relative;
        &:hover {
          background-color: #ebf9ffaa;
          .remove-icon {
            display: flex;
          }
        }

        .icon-content {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .icon {
            width: 20px;
            height: 20px;
          }
        }

        .remove-icon {
          display: none;
          position: absolute;
          top: 0px;
          right: 0px;
          width: 30px;
          height: 30px;
          color: #ff6262;
          justify-content: center;
          align-items: center;
          background-color: #f1f1f1aa;
        }
      }
    }
  }

  .center-container {
    height: 100%;

    .name-container {
      height: 50px;

      display: flex;
      align-items: center;
      justify-content: left;
      padding: 0px 10px;
      gap: 10px;
      span {
        text-wrap: nowrap;
      }
    }

    .code-title {
      height: 25px;
      display: flex;
      justify-content: left;
      align-items: center;
      padding-left: 10px;
    }
    .code-container {
      padding: 10px;
    }
    .submit-container {
      padding: 10px;
      display: flex;
      justify-content: right;
    }
  }

  .right-container {
    height: 100%;
    width: calc(100% - 2px);

    .preview-container {
      height: calc(100% - 25px);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .preview-icon {
        width: 80%;
      }
    }
  }
}
</style>
